<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">分类管理</span>
    <el-button type="primary" @click="addCategory"
               style="float: right;margin-top:10px;">新增分类
    </el-button>
  </div>

  <!-- 搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="分类搜索">
        <el-input placeholder="输入名称" style="width: 220px;"
                  v-model="searchCategoryData.name"
                  @keydown.enter="loadCategoryList"></el-input>
      </el-form-item>
      <el-form-item label="分类状态" style="width: 290px;">
        <el-select placeholder="请选择状态" v-model="searchCategoryData.status" @change="loadUser">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadCategoryList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 数据表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="categoryListData" v-loading="loading">
      <el-table-column label="ID" prop="id" align="center"></el-table-column>
      <el-table-column label="名称" prop="name" align="center"></el-table-column>
      <el-table-column label="状态" prop="statusText" align="center">
        <template #default="scope">
          <el-switch active-value="1" inactive-value="-1"
                     @change="changeCategoryStatus(scope.row.id)"
                     v-model="scope.row.status"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="添加人" prop="managerName" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editCategory(scope.row.id,scope.row)">编辑
          </el-button>
          <el-button link type="danger" @click="deleteCategory(scope.row.id,scope.row.name)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 新建分类弹窗 -->
  <!-- :before-close="handleClose"在弹窗关闭之前调用此自定义函数
   这样避免点击弹窗外部也能将弹窗关闭的问题 -->
  <el-dialog
      :title="dialogTitle"
      style="width: 100vh;padding:40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="名称">
            <el-input placeholder="请输入名称" v-model="saveCategoryData.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveCategory">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
//分类列表数据
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
//定义加载动画(true为加载,false为加载完成停止加载)
const loading = ref(true)

//列表数据
const categoryListData = ref([])

//保存数据
const saveCategoryData = ref({});
//弹窗标题
const dialogTitle = ref("新增分类")

//分配权限标题
const dialogCategoryTitle = ref("分配权限")

//所有分类
const allCategoryData = ref([
  {
    name: "分类管理",
    children: [
      {
        name: "列表",
        code: "roleList"
      },
      {
        name: "添加",
        code: "roleAdd"
      },
      {
        name: "编辑",
        code: "roleEdit"
      },
      {
        name: "启用/禁用",
        code: "roleHandle"
      },
      {
        name: "分配权限",
        code: "ruleEdit"
      },
    ]
  },
  {
    name: "管理员管理",
    children: [
      {
        name: "列表",
        code: "managerList"
      },
      {
        name: "添加",
        code: "managerAdd"
      },
      {
        name: "编辑",
        code: "managerEdit"
      },
      {
        name: "启用/禁用",
        code: "managerHandle"
      },
      {
        name: "删除",
        code: "managerDel"
      },
    ]
  }
])

const managerCategory = ref([
  'managerList', 'roleList', 'roleAdd'
])

const dialogVisible = ref(false)
const dialogCategoryVisible = ref(false)

//搜索数据
const searchCategoryData = ref({})
onMounted(() => {
  loadCategoryList();
})

const handleCategoryClose = () => {
  dialogCategoryVisible.value = false;
  dialogCategoryTitle.value = "分配权限";
}

//处理弹窗关闭的方法
const handleClose = () => {
  //用户确认关闭后,关闭弹窗
  dialogVisible.value = false;
  //清空已输入的表单数据
  saveCategoryData.value = {};
}

//点击新建的弹窗
const addCategory = () => {
  dialogVisible.value = true;
  dialogTitle.value = "新增分类";
}

//加载列表
const loadCategoryList = () => {
  loading.value = true;
  let data = qs.stringify(searchCategoryData.value);
  categoryListData.value = [
    {
      id: 1,
      name: '程序猿',
      status: 1,
      statusText: '启用',
      managerName: '管理员1',
      createTime: '2024-01-01 11:11:11',
    },
    {
      id: 2,
      name: '设计师',
      status: 1,
      statusText: '启用',
      managerName: '管理员2',
      createTime: '2024-01-01 11:11:11',
    },
    {
      id: 3,
      name: '会计',
      status: -1,
      statusText: '禁用',
      managerName: '管理员3',
      createTime: '2024-01-01 11:11:11',
    },
  ];
  loading.value = false;
}

//编辑分类
const editCategory = (id, row) => {
  dialogVisible.value = true;
  dialogTitle.value = "编辑分类";
  saveCategoryData.value = row;
};

//删除分类
const deleteCategory = (id, name) => {
  if (confirm("确定要删除【" + name + "】吗？")) {

  }
};

//更改分类状态
const changeCategoryStatus = (id) => {
}

//重置搜索方法
const resetSearch = () => {
  searchCategoryData.value = {};
  loadCategoryList();
}

const saveCategory = () => {
  let data = qs.stringify(saveCategoryData.value);
  ElMessage.success('保存成功');
  dialogVisible.value = false;
  loadCategoryList();
}
</script>

<style scoped>

</style>